<!--
 * @Description: 传入record数据，通过判断record.type，来渲染对应的组件
 * @Author: lsb
 * @Date: 2022-02-12 
 * @LastEditors: xxx
 * @LastEditTime: 2022-02-12
 -->
<template>
    <el-dialog
     title="编辑组件属性"
	 :visible.sync="visible"
	 :close-on-click-modal="false"
	 @close="QualityDialogClose"
	 >
	 <div  class="list-group" v-if="visible" >
	 <div class="list-group-item" :rowId="row.rowId"  v-for="(row,rowId) in projectParameters.ctrlProperties" :key="rowId" >
        <div class="Grid-cell" :type="item.type" :id="item.id"  v-for="(item,d) in row" :key="d" >
		  <PublicLabel :item="item" />
		  <PublicItem :item="item" @change="handleChange" :design="isDesign" /> 	  
        </div>
      </div>
    </div>	  
	 <span slot="footer" class="dialog-footer">
	  <el-button @click="QualityDialogClose">取消</el-button>
	  <el-button type="primary" @click="onOK">确定</el-button>
	 </span>
	</el-dialog> 
</template> 
<script>
 import PublicItem from "../PublicItem/index";
 import PublicLabel from "../PublicLabel/index";
export default {
  name: "QualityDialog",
  props: {
    projectParameters:{
	type:Object,
	required:true
    },
    QualityDialogFlag:{
		default:false
	}
  },
  components: {
    PublicItem,
	PublicLabel
  },
  mounted() {
     //debugger;
	 this.timer = setInterval(this.saveProperty, 500);
  },
   data() {
    return {
	  data:{},
	  visible:false,
	  isDesign:0,
	  ctrlId:'',
	  timer:''
	}
 },
  methods: {
    QualityDialogClose() {
	  //debugger;
	  this.$emit("update:QualityDialogFlag",false);
    },
	handleChange(value, key) {
       //debugger;
      this.data[key] = value;
   },
   onOK(){
	//debugger;
	this.$emit("okEvent",this.ctrlId,this.data);
	this.QualityDialogClose();
   },
   saveProperty(){
	var i;
    //debugger;
	if(this.projectParameters.ctrlProperties){
	for(i=0;i<this.projectParameters.ctrlProperties.length;i++){
	  var row  = this.projectParameters.ctrlProperties[i];
	  var item=row[0];
	  //循环遍历对象属性
	  for(let [key,value] of Object.entries(item)){
		  if(value!=this.data[key]){
			this.data[key]=value;
		  }
	  }
	}
	if(this.ctrlId!=this.projectParameters.id){
	  this.ctrlId = this.projectParameters.id;
	}
	}
   }
  },
  beforeDestroy() {
      clearInterval(this.timer);
  },
  watch: {
	QualityDialogFlag(){
	  this.visible = this.QualityDialogFlag;	
	}
  }
};
</script>
<style  scoped>
.list-group {
  display: flex;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  border: 0;
}
.list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}
.list-group-item {
  position: relative;
  display: block;
  padding: 0.75rem 1.25rem;
  margin-bottom: -1px;
  background-color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.125);
  box-sizing: border-box;
}
.el-form-item__label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.el-form-item__content {
  line-height: 40px;
  position: relative;
  font-size: 14px;
}
</style>
